<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			
			/*
				通配选择器
				选中所有元素
			 */
			* {
				margin: 0;
			}
			
			/* 
				元素选择器
			 */
			div {
				background-color: yellow;
			}

			p {
				background-color: green;
			}

			/*
				群组选择器
			*/
			div,p,a,li {
				/*
					边框: 宽度 样式 颜色;
					solid: 实线;
					dashed: 虚线;
					dotted: 点状线;
					double: 双实线;
					groove: 3d凹槽;
					ridge: 3d凸槽;
					inset: 3d凹边;
					outset: 3d凸边;
				*/
				border: 20px inset red;
			}
			
			/*

				class选择器 | 类选择器
			*/
			.w {
				width: 500px;
			}

			.pink {
				background-color: pink;
			}

			/*
				ID选择器, id在页面中唯一, 不能重复
			*/
			#box {
				/*
					字体大小
				*/
				font-size: 50px;
				/*
					字体颜色
				*/
				color: cyan;
			}

		</style>
	</head>
	<body>

		<!-- 
			css语法:
				选择器 {
					样式1: 值1;
					样式2: 值2;
					样式3: 值3;
					....: ...;
				}

		 -->

		<div>1</div>

		<p class="w">2</p>

		<div>3</div>
		<!-- 
			一个元素可以有多个类名, 类名之间用空格隔开
		 -->
		<div class="w pink">4</div>

		<p>5</p>

		<div id="box">6</div>

		<div class="pink">7</div>

		<ul>
			<li class="w">呵呵</li>
			<li>哈哈</li>
			<li>嘿嘿</li>
		</ul>

		<!-- <hr> -->
		<!-- table[border=2]>(tr>td{单元格$}*4)*3 -->
		
	</body>
</html>
<!-- 

	作业1: 百度首页
	作业2: 菜鸟教程作两个页面, 可以相互跳转 http://www.runoob.com/html/html-basic.html
	作业3: https://accounts.douban.com/register 豆瓣注册
	作业4: 调查问卷 https://www.wjx.cn/jq/2007741.aspx


 -->








